<template>
  <div class="max">
    <my-header :backBtn="true">
      <div slot="title">宝宝直播</div>
    </my-header>

    <div class="weui-cells" v-for="c in cameras">
      <a
        :aria-labelledby="
          'js_cell_itl_hd' + c.id + ' ' + 'js_cell_itl_bd' + c.id
        "
        class="weui-cell weui-cell_access weui-cell_example"
        href="javascript:"
        @click="initVideoPlayer(c)"
      >
        <span
          class="weui-cell__hd"
          :id="'js_cell_itl_hd' + c.id"
          aria-hidden="true"
        >
          <img
            src="../../../static/img/zhibo.png"
            alt=""
            style="width: 43px; margin-right: 34px; display: block"
        /></span>
        <span
          class="weui-cell__bd"
          :id="'js_cell_itl_bd' + c.id"
          aria-hidden="true"
        >
          <span>{{ c.name }}</span>
        </span>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cameras: [],
      kinsfolkId: '',
      loginType: '',
      cplayer: {},
      show: false,
      camera: {},
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    getData() {
      this.kinsfolkId = this.$Cookies.get("openId");
      this.loginType = this.$Cookies.get('loginType');
      this.cameras = new Array();
      this.$http.getKinsfolkList1(this.kinsfolkId, this.loginType)
        .then((response) => {
          if (response.data != null && response.code == 200) {
            for (var i = 0; i < response.data.length; i++) {
              this.cameras.push(response.data[i]);
            }
          }
        });
    },
    initVideoPlayer(c) {
      this.$router.push({
        path: "/live-player",
        query: c,
      });
    },
  },
};
</script>
<style scoped>
.phone-tip {
  padding-top: 8rem;
  box-sizing: border-box;
  font-size: 2rem;
  color: rgba(16, 16, 16, 1);
}

.phone-tip img {
  width: 25.5rem;
  margin-bottom: 2rem;
}

.video-js .vjs-icon-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
